<template>
  <ul class="navs">
    <li class="home"><RouterLink to="/">首页</RouterLink></li>

    <li
      v-for="item in list"
      :key="item.id"
      :class="{ open: item.open == true }"
      @mouseenter="isshow(item)"
      @mouseleave="ishide(item)"
    >
      <router-link to="/" :class="{ open: item.open == true }">
        {{ item.name }}</router-link
      >
      <div class="info">
        <ul v-if="item.goods">
          <li v-for="item2 in item.children" @click="ishide(item)">
            <router-link :to="`/subCategory/${item2.id}`">
              <img :src="item2.picture" alt="" />
              <p>{{ item2.name }}</p>
            </router-link>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</template>

<script>
import { reactive, toRefs, ref, computed, watch } from "vue";
import { useStore, mapState } from "vuex";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const store = useStore();

    const data = reactive({});
    // 获取数据
    const list = computed(() => {
      return store.state.category.list;
    });

    // 划过开启二级导航
    let isshow = (item) => {
      store.commit("category/show", item);
    };

    // 点击关闭二级导航且路由跳转
    let ishide = (item) => {
      store.commit("category/hide", item);
    };



    return { ...toRefs(data), list, isshow, ishide };
  },
};
</script>


<style scoped lang='less'>
.navs {
  display: flex;
  justify-content: space-around;
  width: 840px;
  align-items: center;
  padding-left: 40px;
  position: relative;
  z-index: 9999;
  li {
    // width: 75px;
    text-align: center;
    a {
      font-size: 16px;
      padding-bottom: 5px;
    }
  }
}

li.open {
  .info {
    opacity: 1;
    height: 132px;
  }
}

a.open {
  color: @xtxColor;
  border-bottom: 1px solid @xtxColor;
}

.info {
  width: 1240px;
  position: absolute;
  left: -200px;
  top: 55px;
  background-color: white;
  box-shadow: 0 0 5px #ccc;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s;
  height: 0;

  ul {
    display: flex;
    justify-content: space-around;
    align-content: center;
    li {
      width: 100px;
      text-align: center;
      cursor: pointer;
      padding-top: 18px;
      img {
        width: 70px;
        height: 70px;
      }
      p {
        padding-top: 10px;
        font-size: 14px;
      }
    }
  }
}
</style>
